<template>
  <div class="h-panel-bar h-panel-no-border">
    <Breadcrumb :datas="titles"></Breadcrumb>
    <span class="h-panel-right">
      <div class="buttons">
        <Button class="h-btn h-btn-text h-btn-xs" @click="upClick">后退</Button>
        <Button class="h-btn h-btn-text h-btn-xs" @click="downClick">前进</Button>
        <Button class="h-btn h-btn-text h-btn-xs" @click="refresh">刷新</Button>
        <Button class="h-btn h-btn-text h-btn-xs" @click="rightMenu">历史</Button>
      </div>
    </span>
    <Modal v-model="opened" type="drawer-right" :hasMask="true" >
      <div class="h-panel h-panel-no-border">
        <div class="h-panel-bar">
          <span class="h-panel-title">历史记录</span>
        </div>
        <div class="h-panel-body">
          <Tabs :datas="menuCache" class-name="h-tabs-menu" v-model="selected" @change="tabChange" keyName="url" v-show="menuCache.length > 0">
          </Tabs>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  computed: {
    current() {
      return this.$store.state.menus.current;
    },
    menuCache() {
      return this.$store.state.menus.cache;
    },
  },
  data() {
    return {
      selected: "",
      opened: false,
      titles: [
        {
          title: this.$store.state.menus.title,
        },
      ],
    };
  },
  methods: {
    refresh() {
      this.$bus.$emit("ReloadData");
    },
    upClick() {
      console.log(this.menuCache);
      let idx = this.menuCache.findIndex((item) => item.url == this.current);
      var item = this.menuCache[idx - 1];
      if (!!item) {
        var url = item.url;
        var title = item.title;
        this.$store.commit("current", url);
        this.$store.commit("title", title);
        this.$router.push(url);
      }
    },
    downClick() {
      let idx = this.menuCache.findIndex((item) => item.url == this.current);
      var item = this.menuCache[idx + 1];
      if (!!item) {
        var url = item.url;
        var title = item.title;
        this.$store.commit("current", url);
        this.$store.commit("title", title);
        this.$router.push(url);
      }
    },
    rightMenu() {
      this.opened = true;
    },
    tabChange(data) {
      if (!data) {
        return;
      }
      this.$store.commit("current", data.url);
      this.$store.commit("title", data.title);
      this.$router.push(data.url);
    },
    closeTab(data) {
      console.log(data);
    },
  },
};
</script>